<template>
	<view class="my">
		<view class="content">
			<headTop>
				<view class="user" @click="toLogin">
					<view class="user-img">
						<uv-image :src="userInfo.avatar ? userInfo.avatar : '/static/images/avatar.png'" width="8vw"
							height="8vw" radius="50%" />
					</view>
					<view class="user-text">
						<text>{{ userInfo.username }}</text>
					</view>
				</view>
			</headTop>

			<view style="position: relative; height: 42vw; width: 100%; margin-top: 3vw; color: #fff">
				<image src="@/static/images/myBg.png"
					style="width: 100%; height: 42vw; position: absolute; z-index: 1" />
				<view>
					<view style="position: absolute; left: 15px; z-index: 9">
						<view style="font-size: 30rpx; padding: 1vw 0; color: #665f45">等级:{{ userInfo.level_name }}
						</view>

						<view style="font-size: 24rpx; color: #fff; margin: 6vw 0 2vw 0">账户余额:</view>
						<view style="font-size: 50rpx; color: #fff">
							<text style="font-size: 30rpx">¥</text>
							{{ userInfo.balance.toFixed(2) }}
						</view>
					</view>
					<view style="position: absolute; left: 15px; z-index: 9; bottom: 3vw; color: #fff">
						佣金余额:
						{{ userInfo.commission.toFixed(2) }}
					</view>

					<view style="position: absolute; right: 15px; z-index: 9; color: #fff">
						<view style="font-size: 30rpx; padding-top: 4vw">会员编号: {{ userInfo.id }}</view>
					</view>
					<view style="position: absolute; right: 15px; z-index: 9; bottom: 16vw">
						<text
							style="padding: 8px 12px; border: 1px solid #fff; border-radius: 8px; margin-right: 10px">申请提现</text>
						<text style="padding: 8px 12px; border-radius: 8px; background-color: #fff; color: #545977"
							@tap="czClick">余额充值</text>
					</view>
					<view style="position: absolute; right: 15px; z-index: 9; bottom: 3vw; color: #fff">
						冻结余额:
						{{ userInfo.consumption.toFixed(2) }}
					</view>
				</view>
			</view>
			<view class="order">
				<view class="order-top">
					<view class="order-left">我的订单</view>
					<view class="order-right">查看全部 ></view>
				</view>
				<view class="gird" @tap="toOrder">
					<uv-grid :border="false" col="5">
						<uv-grid-item v-for="(item, index) in orderList" :key="index">
							<view class="grid-img">
								<uv-image :src="item.src" width="8vw" height="8vw" />
							</view>
							<text class="grid-text">{{ item.title }}</text>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
			<view class="order" style="padding: 0 3vw">
				<view class="gird">
					<uv-grid :border="false" col="5">
						<uv-grid-item v-for="(item, index) in navList" :key="index" style="margin: 20rpx 0">
							<view class="grid-img" @tap="toPage(item.url)">
								<uv-image :src="item.src" width="8vw" height="8vw" />
							</view>
							<text class="grid-text">{{ item.title }}</text>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
			<view class="my-cell">
				<uv-cell v-for="(item, index) in pageList" :key="index" :title="item.title" @tap="toPage(item.url)"
					titleStyle="font-size:26rpx;color: #666;margin-left: 10rpx;" isLink>
					<template v-slot:icon>
						<view class="cell-img">
							<uv-image :src="item.src" width="6vw" height="6vw" />
						</view>
					</template>
				</uv-cell>
			</view>
		</view>
		<zwTabBar :defaultSel="4" :bigIdx="4"></zwTabBar>

		<uv-popup ref="popup" mode="bottom" closeable safeAreaInsetTop zIndex="99">
			<view class="container">
				<uni-forms label-position="top">
					<uni-forms-item label="充值卡密" required v-if="rechargeParams.type === 'kami'">
						<uni-easyinput v-model="rechargeParams.card" placeholder="请输入卡号密码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="充值金额" required v-else>
						<uni-easyinput v-model.number="rechargeParams.amount" type="number"
							placeholder="请输入充值金额"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="充值方式" required>
						<uv-radio-group v-model="rechargeParams.type" placement="column" iconPlacement="right">
							<uv-radio :customStyle="{ margin: '20rpx 0' }" v-for="(item, index) in radiolist"
								:key="index" :name="item.type">
								<template v-slot:default>
									<div class="conItem">
										<image :src="item.img" style="width: 60rpx; height: 60rpx"></image>
										{{ item.name }}
									</div>
								</template>
							</uv-radio>
						</uv-radio-group>
					</uni-forms-item>
				</uni-forms>
				<view class="">
					<button :style="{ backgroundColor: getTheme.themeColor, color: '#fff', fontSize: '14px' }"
						@click="handleConfirm">确认充值</button>
				</view>
			</view>
		</uv-popup>

		<uv-modal ref="modal" title="余额充值" content="是否确定支付完成?" showConfirmButton="true" showCancelButton="true"
			@confirm="confirm" @cancel="confirm"></uv-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from "vue";
	import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
	import headTop from "@/components/headTop/index.vue";
	import { userApi, tradeApi } from "@/api/index";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	const modal = ref<any>(null);

	const popup = ref<any>(null);
	const czClick = () => {
		popup.value.open();
	};

	const rechargeParams = ref({
		type: "alipy",
		amount: null,
		card: ""
	});

	const handleConfirm = async () => {
		if (rechargeParams.value.type === "kami") {
			try {
				const res = await tradeApi.cardrecharge({ card: rechargeParams.value.card });
				if (res.status === 0) {
					uni.showToast({
						icon: "success",
						title: res.message
					});
				} else {
					uni.showToast({
						icon: "error",
						title: res.message
					});
				}
			} catch (error) {
				uni.showToast({
					title: error.message
				});
			}
		} else if (rechargeParams.value.type === "alipy") {
			try {
				const res = await tradeApi.recharge({ type: rechargeParams.value.type, amount: rechargeParams.value.amount });

				if (res.status === 0) {
					window.location.href = await res.data.payUrl;
					popup.value.close();
					modal.value.open();
				} else {
					uni.showToast({
						icon: "error",
						title: res.message
					});
				}
			} catch (error) {
				uni.showToast({
					title: error.message
				});
			}
		} else if (rechargeParams.value.type === "weixin") {
			uni.navigateTo({
				url: `/pages/wechatPay/wechatPay?type=${rechargeParams.value.type}&amount=${rechargeParams.value.amount}`
			});

			popup.value.close();
			modal.value.open();
		}
	};

	const radiolist = [
		{ name: "支付宝", img: "/static/svg/alipy.svg", type: "alipy" },
		{ name: "微信支付", img: "/static/svg/weixin.svg", type: "weixin" },
		{ name: "QQ支付", img: "/static/svg/qqPay.svg", type: "qq" },
		{ name: "卡密支付", img: "/static/svg/kami.svg", type: "kami" }
	];

	const userInfo = ref<any>({
		username: "昵称",
		balance: 0.0,
		commission: 0.0,
		consumption: 0.0,
		avatar: "",
		id: 0,
		level_name: "普通会员"
	});
	userInfo.value = authStore.user;

	const getUser = async () => {
		await userApi.getUserinfo().then((res) => {
			authStore.setUser(res.data);
			userInfo.value = authStore.user;
			modal.value.close();
		});
	};

	const confirm = () => {
		getUser();
	};
	/* ------------------------------------------------------------订单栏------------------------------------------------- */
	const orderList = [
		{ src: "/static/images/list1.png", title: "已付款" },
		{ src: "/static/images/list2.png", title: "待付款" },
		{ src: "/static/images/list3.png", title: "处理中" },
		{ src: "/static/images/list4.png", title: "已退款" },
		{ src: "/static/images/list5.png", title: "已完成" }
	];

	const navList = [
		{ title: "资金明细", url: "/pages/capital/capital", src: "/static/images/cell1.png" },
		{ title: "操作日志", url: "/pages/log/log", src: "/static/images/cell6.png" },
		{ title: "我的团队", url: "/pages/invite/invite", src: "/static/images/cell7.png" },
		{ title: "消息中心", url: "/pages/message/message", src: "/static/images/cell2.png" },
		{ title: "工单管理", url: "/pages/work/work", src: "/static/images/cell4.png" },
		{ title: "帮助中心", url: "/pages/help/help", src: "/static/images/cell5.png" },
		{ title: "充值信息", url: "/pages/trade/trade", src: "/static/images/cell10.png" },
		{ title: "调价记录", url: "/pages/price/price", src: "/static/images/cell8.png" },
		{ title: "领取红包", url: "/pages/redPacket/redPacket", src: "/static/images/cell12.png" },
		{ title: "转盘抽奖", url: "/pages/lotteryList/lotteryList", src: "/static/images/cell11.png" }
	];

	/* ------------------------------------------------------------页面跳转栏------------------------------------------------- */
	const pageList = [
		{ title: "抽奖记录", url: "/pages/lotteryRecord/lotteryRecord", src: "/static/images/cell13.png" },
		{ title: "商品收藏", url: "/pages/collect/collect", src: "/static/images/cell9.png" },
		{ title: "商品订阅", url: "/pages/subscribe/subscribe", src: "/static/images/cell14.png" },
		{ title: "浏览足迹", url: "/pages/footprint/footprint", src: "/static/images/cell15.png" }
	];

	/* ------------------------------------------------------------跳转编辑用户信息------------------------------------------------- */
	const toLogin = () => {
		uni.navigateTo({
			url: "/pages/login/login"
		});
	};

	const toOrder = () => {
		uni.navigateTo({
			url: "/pages/order/order"
		});
	};

	const toPage = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	const customStyle = { background: "#F4E2E0", color: "#7A2110" };
</script>

<style lang="scss">
	.my {
		padding-bottom: 10vh;

		.content {
			.user {
				display: flex;
				justify-content: start;

				.user-img {
					line-height: 8vw;
					transform: translate(-1vw, 0);
				}

				.user-text {
					line-height: 8vw;
					font-weight: 600;
					font-size: 28rpx;
				}
			}

			.order {
				background-color: rgba(255, 255, 255, 0.9);
				padding: 2vw 3vw;
				margin-top: 2vw;
				border-radius: 2vw;

				.order-top {
					display: flex;
					justify-content: space-between;
					padding: 1vw;

					.order-left {
						font-size: 26rpx;
						font-weight: 600;
					}

					.order-right {
						font-size: 22rpx;
					}
				}

				.gird {
					padding: 1vw 0;

					.grid-img {
						padding: 1vw 2vw;
					}

					.grid-text {
						font-size: 26rpx;
					}
				}
			}

			.my-cell {
				margin-top: 2vw;
				background-color: rgba(255, 255, 255, 0.9);
				border-radius: 2vw;
			}
		}

		.container {
			padding: 30rpx 20rpx;

			.conItem {
				display: flex;
				align-items: center;
				gap: 10px;
			}
		}
	}
</style>